<template>
  <div class="q-pa-md" style="display: flex; gap: 10px; flex-wrap: wrap">
    <t-button label="主题按钮" class="tr-button-primary" :show-hint="true" />
    <t-button label="常规按钮" class="tr-button-default" :show-hint="true" />
    <t-button label="文字按钮" class="tr-button-text" :show-hint="true" />
    <t-button label="文字链接" class="tr-button-link" :show-hint="true" />
    <t-button
      loading
      label="加载"
      class="tr-button-primary"
      :show-hint="true"
    />
    <t-button
      disable
      label="禁用"
      class="tr-button-default"
      :show-hint="true"
    />
    <t-button
      icon="add"
      label=""
      class="tr-button-icon-primary"
      :show-hint="true"
      hint-msg="图标按钮"
    />
    <t-button
      icon="add"
      label=""
      class="tr-button-icon-default"
      :show-hint="true"
      hint-msg="图标按钮"
    />
    <t-button
      icon="add"
      label=""
      class="tr-button-icon-text"
      :show-hint="true"
      hint-msg="图标按钮"
    />

    <t-button
      class="tr-button-default"
      icon="edit"
      label="点击事件"
      :show-hint="true"
      hint-msg="点击或使用快捷键"
      shortcut-key="combined"
      shortcut-key-comb-ctrl="Ctrl"
      shortcut-key-comb-key="S"
      @click="onclick"
    />
  </div>
</template>
<script setup>
function onclick() {
  alert('点击按钮事件');
}
</script>
